<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iPhone手机触屏网页jquery - 站长素材</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
</head>

<body>

<div class="headeline"></div>



<div class="iphonebox">
	<div class="webbox">
		<div id="header"><a href="http://sc.chinaz.com/">
			触屏手机打开网页</a></div>
		<div id="wrapper">
			<div class="swipe">
				<ul id="slider">
					<li style="display:block"><img width="326" height="235" src="images/1.jpg" alt="" /></li>
					<li><img width="326" height="235" src="images/2.jpg" alt="" /></li>
					<li><img width="326" height="235" src="images/3.jpg" alt="" /></li>
					<li><img width="326" height="235" src="images/4.jpg" alt="" /></li>
				</ul>
				<div id="pagenavi">
					<a href="javascript:void(0);" class="active">1</a>
					<a href="javascript:void(0);">2</a>
					<a href="javascript:void(0);">3</a>
					<a href="javascript:void(0);">4</a>
				</div>
			</div><!--swipe end-->
			<div id="scroller">
				<ul>
					<li><img src="images/img01.jpg" /><span>叙利亚战机轰炸叙土边境致6死</span></li>
					<li><img src="images/img02.jpg" /><span>寒冬!李宁匹克上千家门店倒闭</span></li>
					<li><img src="images/img03.jpg" /><span>梅西压C罗连续三年夺西甲MVP</span></li>
					<li><img src="images/img04.jpg" /><span>传姚晨曹郁完婚 宣传:会通知</span></li>
					<li><img src="images/img05.jpg" /><span>Nexus4开卖 22分钟抢购一空</span></li>
					<li><img src="images/img01.jpg" /><span>叙利亚战机轰炸叙土边境致6死</span></li>
					<li><img src="images/img02.jpg" /><span>寒冬!李宁匹克上千家门店倒闭</span></li>
					<li><img src="images/img03.jpg" /><span>梅西压C罗连续三年夺西甲MVP</span></li>
					<li><img src="images/img04.jpg" /><span>传姚晨曹郁完婚 宣传:会通知</span></li>
					<li><img src="images/img05.jpg" /><span>Nexus4开卖 22分钟抢购一空</span></li>
					<li><img src="images/img01.jpg" /><span>叙利亚战机轰炸叙土边境致6死</span></li>
					<li><img src="images/img02.jpg" /><span>寒冬!李宁匹克上千家门店倒闭</span></li>
					<li><img src="images/img03.jpg" /><span>梅西压C罗连续三年夺西甲MVP</span></li>
					<li><img src="images/img04.jpg" /><span>传姚晨曹郁完婚 宣传:会通知</span></li>
					<li><img src="images/img05.jpg" /><span>Nexus4开卖 22分钟抢购一空</span></li>
				</ul>
			</div><!--scroller end-->
		</div>
		<div id="footer"><a href="http://sc.chinaz.com/">不支持360、IE6、7、8</a></div>
	</div>
</div>

<script type="text/javascript" src="js/touchScroll.js"></script>
<script type="text/javascript" src="js/touchslider.dev.js"></script>
<script type="text/javascript">
var active=0,
	as=document.getElementById('pagenavi').getElementsByTagName('a');
	
for(var i=0;i<as.length;i++){
	(function(){
		var j=i;
		as[i].onclick=function(){
			t2.slide(j);
			return false;
		}
	})();
}

var t1=new TouchScroll({id:'wrapper','width':5,'opacity':0.7,color:'#555',minLength:20});

var t2=new TouchSlider({id:'slider', speed:600, timeout:6000, before:function(index){
		as[active].className='';
		active=index;
		as[active].className='active';
	}});
</script>
<!--演示内容结束-->

</body>
</html>